<html xmlns:saxon="http://icl.com/saxon">
   <head>
      <link rel="stylesheet" type="text/css" href="doc.css"/>
      <link rel="stylesheet" type="text/css" href=""/>
      <meta author="The MathWorks Ltd."/>
      <meta copyright="2011 The MathWorks Ltd."/>
      <title>Application structure</title>
   </head>

   
    <body>
      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td bgcolor="#e4f0f8"><A href="User guide.html"><font face="Arial" bgcolor="#e4f0f8" size="+0" underline="0" color="#000000"><b>User guide</b></font></A></td>
            <td width="36" bgcolor="#e4f0f8"><A HREF="User guide8.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide8_2.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
         </tr>
      </table>
   

      <br clear="all"/>
          
      <h2>8.1: Application structure&nbsp;<a href="User guide8.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
      

        <p>There are many ways to build graphical applications in MATLAB, but
    here we will take a very simple approach. If the application were to become
larger and more complex, this approach would be changed to better mitigate
    the complexity. Some notes on this are contained <a href="demoBrowserScalability.html">at the end</a>.</p>

    <p>The application is structured as a single function with callbacks and other helper
        functions stored as "nested" subfunctions, i.e. functions inside the main function. This has
        the advantage that the nested subfunctions can share access to any variables
        declared in the main function. This is also a risk as anything we accidentally
        declare in the main function becomes "global" within the application. For that reason
        <em>all</em> logic is put into subfunctions and we restrict the main
    function to just declaring two shared variables:</p>
    <ul>
        <li><b>data</b>: a structure containing all shared data</li>
        <li><b>gui</b>: a structure containing handles to GUI widgets</li>
    </ul>
    <example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> demoBrowser()

   <code class="COMMENT">% Declare shared variables</code>
   data = createData();
   gui = createInterface( data.DemoNames );

   <code class="COMMENT">% Now update the GUI with the current data</code>
   updateInterface();
   redrawDemo();
   
   <code class="COMMENT">% Helper subfunctions</code>.
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> data = createData() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> gui = createInterface(names) ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> updateInterface() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> redrawDemo() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;

   <code class="COMMENT">% Callback subfunctions</code>.
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> onMenuSelection() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> onListSelection() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> onDemoHelp() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> onHelp() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> onExit() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;

<a href="matlab:doc end"><code class="FUNCTION">end</code></a> <code class="COMMENT"> % Main function</code>
</font></pre></example>

<p>Note that all of the work is done in subfunctions. Most subfunctions
are callbacks executed when a button is pressed or a menu selected. The four used
at startup are helper functions:</p>
    <ul>
        <li><b>createData</b>: build the structure which contains all application data</li>
        <li><b>createInterface</b>: build the user interface</li>
        <li><b>updateInterface</b>: update selectors etc in response to a change in the data</li>
        <li><b>redrawDemo</b>: redraw the plot part of the interface</li>
    </ul>
    <p>We will not dig into all the subfunctions and callbacks, but instead
        concentrate on the GUI creation (<a href="demoBrowserCreateInterface.html">createInterface</a>)
        and update (<a href="demoBrowserUpdateInterface.html">updateInterface</a>).</p>
    
                 <p><small>(Full source code for this application is available here: 
                     [ <a href="Examples/demoBrowser.m">view</a>
                     | <a href="matlab: edit(fullfile(layoutRoot,'layoutHelp','Examples','demoBrowser.m'))">edit</a>
                     | <a href="matlab: p=pwd();cd(fullfile(layoutRoot,'layoutHelp','Examples')); demoBrowser; cd(p)">run</a> ]
                 )</small></p>

      
      <br clear="ALL"/>
      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide8.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide8.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">A complete example</font></a></td>
            <td width="20%" height="15" bgcolor="#e4f0f8" align="center"><a href="index.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">[Top]</font></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide8_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">createInterface</font></a></td>
            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide8_2.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
         </tr>
      </table>
      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
   
   </body>
</html>
        
